import React from 'react';
import { observer, toJS } from 'mobx-react';
import Group from 'components/config/group';
import Range from 'components/config/range';
import Radios from 'components/config/radio';
import Input from 'components/config/input';
import Color from 'components/config/color';
import Image from 'components/config/image';
import Switch from 'components/config/switch';
import BaseConfig from 'modules/common/config';
import CONFIG from 'common/const/observer/slider';
import Utils from 'common/utils';
import { lazilyComponent } from 'components/lazilyLoad';


let components = {};
@observer
export default class SliderConfig extends BaseConfig {
  title = '轮播设置';
  constructor(props) {
    super(props);
    this.state = {
      mod: props.mod,
    };
  }

  /**
   * 按 const 里的定义来渲染配置
   * @returns {Array}
   */
  renderConfigByConst() {
    const { mod } = this.props;
    return (
      CONFIG.map((cfg, index) => {
        if (!cfg.hideConfig) {
          let _props = {
            key: `config-${index}`,
            value: mod[cfg.key],
            label: cfg.label,
            onChange: val => {
              mod.update(cfg.key, val);
            },
          };
          switch (cfg.type) {
            case 'input': {
              _props.unit = cfg.unit;
              if (cfg.min) {
                _props.min = cfg.min;
              }
              break;
            }
            case 'radio': {
              _props.options = cfg.options;
              break;
            }
            case 'switch': {
              _props.size = 'small';
              _props.checked = mod[cfg.key];
              delete _props.value;
              break;
            }
            default: {
              break;
            }
          }
          if (!components[cfg.type]) {
            components[cfg.type] = lazilyComponent(import(`components/config/${cfg.type}`));
          }
          const C = (props) => components[cfg.type](props);
          return <C {..._props} />;
        }
      })
    );
  }

  renderAttrConfig() {
    const { mod } = this.props;
    const { height, width } = mod;
    const groupProps = {
      defaultActiveKey: [0, 1],
      list: [
        {
          title: '轮播尺寸',
          children: (
            <div>
              <Input value={width}
                     label="轮播宽度"
                     onChange={val => {
                       mod.setWidth(val);
                     }} />
              <Input value={height}
                     label="轮播高度"
                     type="number"
                     onChange={val => {
                       mod.setHeight(val);
                     }} />
            </div>
          )
        },
        {
          title: '轮播设置',
          children: (
            <div>
              {this.renderConfigByConst()}
            </div>
          )
        },
        {
          title: '其他设置',
          children: (
            <div>
              <Range label="旋转角度"
                     onChange={val => {
                       mod.update('rotate', val);
                     }}
                     min={0}
                     max={360}
                     value={mod.rotate} />
            </div>
          )
        },
      ]
    };
    return (
      <Group {...groupProps}/>
    );
  }
}
